<template>
  <view class="index">
    <searchBox></searchBox>
    <!-- 轮播图 -->
    <swiper autoplay circular indicator-dots :interval="1800">
      <swiper-item @click="navigator(item.navigator_url)" v-for="item in swiperList" :key="item.goods_id">

        <image :src="item.image_src" mode="widthFi"></image>

      </swiper-item>
    </swiper>
    <!-- 导航 -->
    <view class="nav">

      <view class="nav_item" v-for="(it,s) in navIcon" :key="s">
        <navigator open-type="switchTab" url="/pages/news/news">
          <view :class="it.icon"></view>
          <text>{{it.text}}</text>
        </navigator>
      </view>

    </view>
    <!-- 推荐商品 -->
    <view class="index_floor">
      <view class="floor_group" v-for="(item1,index1) in floorList" :key="item1.floor_title">
        <!-- 标题 -->
        <view class="floor_title">
          <image mode="widthFix" :src="item1.floor_title.image_src"></image>
        </view>
        <!-- 内容 -->
        <view class="floor_list">
          <navigator v-for="(item2,index2) in item1.product_list" :key="item2.name" :url="item2.navigator_url">
            <image :mode="index2===0?'widthFix':'scaleToFill'" :src="item2.image_src"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import searchBox from "../../components/searchBox/searchBox.vue";
import request from "../../utils/request.js";
export default {
  components: {
    searchBox,
  },
  data() {
    return {
      swiperList: [], //轮播图
      floorList: [], //商品
      navIcon: [
        { text: "分类", icon: "iconfont icon-fenlei" },
        { text: "秒杀拍", icon: "iconfont icon-yingxiaogongju-tuangoumiaosha" },
        { text: "超市购", icon: "iconfont icon-chaoshigouwu" },
        { text: "母婴品", icon: "iconfont icon-muyingwanju" },
      ],
    };
  },
  onLoad() {
    this.getSwipersList();
    this.getfloorList();
  },
  methods: {
    // 获取轮播图
    async getSwipersList() {
      const res = await request("/home/swiperdata");
      if (res.meta.status !== 200) {
        uni.showToast({
          title: "数据请求失败",
        });
      } else {
        res.message.map((v) => {
          v.navigator_url = v.navigator_url.replace(/main/g, "goods_detail");
        });
        this.swiperList = res.message;
      }
      console.log(res, "轮播图");
    },
    navigator(url) {
      uni.navigateTo({
        url: url,
      });
    },

    async getfloorList() {
      const res = await request("/home/floordata");
      if (res.meta.status !== 200) {
        uni.showToast({
          title: "数据请求失败",
        });
      } else {
        res.message.map((v) => {
          v.product_list.map((s) => {
            return (s.navigator_url = s.navigator_url.replace(
              /\?/g,
              "/goods_list?"
            ));
          });
        });
        console.log(res.message, " res.message");
        this.floorList = res.message;
      }
      console.log(res, "楼层");
    },
  },
};
</script>

<style lang="scss" scoped>
.index_floor {
  .floor_group {
    .floor_title {
      padding: 10rpx 0;
      image {
        width: 100%;
      }
    }
    .floor_list {
      // 清除浮动

      overflow: hidden;
      navigator {
        float: left;

        width: 32.33%;

        /* 后四个超链接 */

        &:nth-last-child(-n + 4) {
          /* 原图的宽高 232 *386 */
          // 232 / 386 = 33.33vw / height
          // 第一张图片的高度 height:33.33vw * 386 /  232
          height: 31.8vw * 386 / 232 /2;

          border-left: 10rpx solid #fff;
        }

        /* 2 3 两个超链接 */
        &:nth-child(2),
        &:nth-child(3) {
          border-bottom: 10rpx solid #fff;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.index {
  swiper {
    width: 750rpx;
    height: 380rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .nav {
    display: flex;
    margin: 20rpx 10rpx;
    .nav_item {
      width: 25%;
      text-align: center;
      color: #f95314;

      text {
        font-size: 32rpx;
      }
      view {
        width: 120rpx;
        height: 120rpx;
        background: #f95314;
        border-radius: 60rpx;
        margin: 20rpx auto;
        line-height: 120rpx;
        color: #fff;
        font-size: 46rpx;
      }
    }
  }
}
</style>
